<style type="text/css">
table.padded-table td { 
	padding:8px; 
	}
</style>
<div id="datosPersona" style="overflow-y:auto;">

	<table id="s4list" cellpadding="0" cellspacing="0"></table>
	<div id="s4pager"  style="text-align:center;" ></div>
	<form id="file_upload" action="archBuq.action" method="POST" enctype="multipart/form-data">
	<div id="drop_zone_1">
        <input id="upload" type="file" name="upload" multiple>
        
        <div>Upload files</div>
    </div>
</form>
</div>
<br><br>
<div id="infoPersona" style="overflow-y:auto;">
		 <form>
			 	<input type="hidden" id="idPersona" name="idPersona" value="0">
		 </form>
	<div id="fotografia" ></div><br><br>
	<table id="persona" class="padded-table " style="font-family: monospace;font-size: medium;">
	<tr>
		<td></td>
 	</tr>
	 <tr>
	 	<td> 

 		</td>
	 </tr>
 </table>
</div>



<script type="text/javascript">
<!--
	$(document).ready(function(){
		$("real-body").css({ height: "900px"});
		$("#drop_zone_1").hide();
		ponerTitulo("Administracion de Datos Persona ");
		cagarPersonas();
				
	});
	
	
$(function () {
	// $('#file_upload').fileUploadUI();
    var initFileUpload = function (suffix) {
        $('#file_upload').fileUploadUI({
            namespace: 'upload',
            fileInputFilter: '#upload' ,
            dropZone: $('#drop_zone_' + suffix),
           // uploadTable: $('#files_' + suffix),
           // downloadTable: $('#files_' + suffix),

            buildDownloadRow: function (file) {
                guardarPathBuque($("#idPersona").val(),file.name);
                return $('<tr><td>' + file.name + '<\/td><\/tr>');
            }
        });
    };
    initFileUpload(1);
});

function guardarPathBuque(idPersona,nombreArchivo){
	//alert("idPersona->"+idPersona);
	$.ajax({
	    type: "POST",                           
	    url: "${pageContext.request.contextPath}/persona.action",
	    data: {oper:"pathPersona",idPersona:idPersona,nomArchivo:nombreArchivo},                                
	    success: function(data){                            
	    	alert("Guarde");
	    }                         
	    });
}


function cagarPersonas(){
	jQuery("#s4list").jqGrid({ 
	url:'${pageContext.request.contextPath}/persona.action?oper=cargarPersonas',
	editurl:'${pageContext.request.contextPath}/persona.action',
	//editurl:'${pageContext.request.contextPath}/persona.action', 
	datatype: "json", 
	height: 'auto', width: 'auto', 
	colModel:[ 
				{name:'idPersona',index:'idPersona',hidden:true, width:150, label:'Id Persona', sortable:true, editable:true},
				{name:'NombrePersona',index:'NombrePersona', width:250, label:'Nombre Persona', editable:true, edittype:"text" ,editoptions: {maxlength: 200}},
				{name:'TipoPersona',index:'TipoPersona', width:150, label:'Tipo Persona', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 50}},
				{name:'Dui',index:'Dui', width:150, label:'Dui', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 10}},
				{name:'Direccion',index:'Direccion', width:150, label:'Direccion', sortable:true, editable:true,editoptions: {maxlength: 100}},
				{name:'Telefono',index:'Telefono', width:150, label:'Telefono', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 10}},
				{name:'Celular',index:'Celular', width:150, label:'Celular', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 10}},
				{name:'Email',index:'Email', width:150, label:'Email', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 50}},
				{name:'Fax',index:'Fax', width:150, label:'Fax', editable:true, edittype:"text" ,editoptions: {maxlength: 10}},
				{name:'Nacionalidad',index:'Nacionalidad', width:150, label:'Nacionalidad', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 50}},
				{name:'Pasaporte',index:'Pasaporte', width:150, label:'Pasaporte', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 50}},
				{name:'LugarExpedicion',index:'LugarExpedicion', width:150, label:'Lugar Expedicion', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 100}},
				{name:'ColorCabello',index:'ColorCabello', width:150, label:'Color de Cabello', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 50}},
				{name:'ColorOjos',index:'ColorOjos', width:150, label:'Color de Ojos', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 50}},
				{name:'Altura',editrules:{number:true},index:'Altura', width:150, label:'Altura', sortable:true, edittype:"text", editable:true ,editoptions: {numbre:true}},
				{name:'senialeParticulares',index:'senialeParticulares', width:150, label:'Se&ntilde;ales Particulares', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 50}},
				{name:'LlamarCasoEmergencia',index:'LlamarCasoEmergencia', width:150, label:'Llamar En Caso De Emergencia', sortable:true, edittype:"text", editable:true ,editoptions: {maxlength: 150}},
				
			], 
	rowNum:20, rowList:[2,20,30], 
	mtype: "POST", 
	rownumbers: true, rownumWidth: 40, 
	
	
	onSelectRow:function(rowid,status){
	//	alert("holaaaa   " +rowid );
		$("#drop_zone_1").show();
		cargarData(rowid);
		
		
	}, 
	gridview: true, 
	pager: '#s4pager', 
	sortname: 'idPersona', viewrecords: true, sortorder: "asc", 
	caption: "Mantenimiento de Datos Persona" 
}).navGrid('#s4pager', { edit:true,add:true,del:true,search:false,refresh:true }, 
		{	width:400,height:550,
			beforeShowForm:function(formid){
				//cargarCombo('${pageContext.request.contextPath}/combo.action','opcionesCombo','#opcionMenu');
				/*$('#FechaArribo').datepicker({
					inline: true, dateFormat: 'dd/mm/yy' 
				});*/
			}
		}, // edit options 
		{	width:400,height:600,
			beforeShowForm:function(formid){
				//cargarCombo('${pageContext.request.contextPath}/combo.action','opcionesCombo','#opcionMenu');
				//$("#FechaArribo").dateicker(); 
				/*$('#FechaArribo').datepicker({
					inline: true, dateFormat: 'dd/mm/yy'
				});*/
			}
		} // add options 
		//{width:375,height:175}, //del options 
		
		
	);
		
}

function cargarData(rowId){
	///alert("en la funcion "+rowId);
	 $.ajax({
	        url:"${pageContext.request.contextPath}/persona.action",
	        
	        data:{oper:"datosPersona",idPersona:rowId},
	        success:function(responseText, statusText) {
	        	  var decs = eval(responseText);
	        	 // $("#nombrePersona").val(decs.persona.nombrePersona);
	        	  $("#idPersona").val(decs.persona.idPersona);
	        	  $('#fotografia ').html("");
	        	  $('#fotografia ').html("<img width='120' height='120' src='${pageContext.request.contextPath}/imagenes/"+decs.persona.fotografia+"'></img>");
	        	  $('#persona ').html("");
	        	  $('#persona ').html("<tr><td  style='font-style: bold,font-size:3em' colspan='3'>Datos Persona</td><td></td><td></td><td></td><tr><tr><td >Nombre Persona :&nbsp;</td><td>"+decs.persona.nombrePersona+"</td> <td></td><td></td><td></td><tr><tr><td>Tipo Persona:&nbsp;</td><td>"+decs.persona.tipoPersona+"</td><td>Dui</td> <td>"+decs.persona.dui+"</td><td>Direccion:&nbsp;</td><td>"+decs.persona.direccion+"</td><tr><tr><td>Telefono:&nbsp;</td><td>"+decs.persona.telefono+"</td><td>Celular:&nbsp;</td> <td>"+decs.persona.celular+"</td><td>Fax:&nbsp;</td><td>"+decs.persona.fax+"</td><tr><tr><td>E-mail:&nbsp;</td><td>"+decs.persona.email+"</td><td>Nacionalidad:&nbsp;</td> <td>"+decs.persona.nacionalidad+"</td><td> Pasaporte:&nbsp;</td><td>"+decs.persona.pasaporte+"</td><tr><tr><td>Lugar de Expedicion:&nbsp;</td><td>"+decs.persona.lugarExpedicion+"</td><td>Color ojos:&nbsp;</td> <td>"+decs.persona.colorOjos+"</td><td>Color Cabello:&nbsp;</td><td>"+decs.persona.colorCabello+"</td><tr><tr><td>Se&ntilde;ales Particulares:&nbsp;</td><td>"+decs.persona.senialeParticulares+"</td><td>Llamar Caso de Emergencia:&nbsp;</td> <td>"+decs.persona.llamarCasoEmergencia+"</td><td></td><td></td><tr>"); 
	        	 
	        	  
	        	  //  $("#celular").val(decs.persona.celular);
	        	  //$("#ColorCabello").val(decs.persona.colorCabello);
	        //	  $("#colorOjos").val(decs.persona.colorOjos);
	        	//  $("#direccion").val(decs.persona.direccion);	
	        	 /* $("#dui")val.
	        	  Email	dddd
	        	  Fax	dfddff
	        	  LlamarCasoEmergencia	dfdf
	        	  LugarExpedicion	ddfdd
	        	  Nacionalidad	dfff
	        	  NombrePersona	heriberto Monterrosa
	        	  Pasaporte	ddff
	        	  Telefono	ssss
	        	  TipoPersona	sss
	        	  id	8
	        	  idPersona	8
	        	  oper	edit
	        	  senialeParticulares	dfdf
	        	  $("#idBuque").val(decs.buques.idRegistroBuque);
	        	  $("#porPer").append(decs.duennos);*/
	        	  //$("#oper").val("edit");
				//$("#buqImg").html("");
	        	  //${pageContext.request.contextPath}/
	        	  //alert(decs.buques.foto);
	        	//  $("#buqImg").html("<img style='margin-top:10%;margin-left:30%' width='250' height='250' src='${pageContext.request.contextPath}/imagenes/"+decs.buques.foto+"'></img>");
	        	  
	        	// var url = $("#sMotorBuque").getGridParam("url");
	        	 // alert(url);
	        	  //url = url + "&idBuque="+$("#idBuque").val();
	        	  //$("#sMotorBuque").setGridParam("url",url);
	        	//  jQuery("#sMotorBuque").jqGrid('setGridParam',{postData:{idBuque:$("#idBuque").val()}});
	        	//  $("#sMotorBuque").trigger("reloadGrid"); 
	              
	        },
	        dataType:'JSON'
	    });
	
	
}
</script>
<!-- <input type="text" id="prueba"/> -->

